<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>PRIMEROS PASOS CON BRACKETS</title>
        <meta name="description" content="Una guía interactiva de primeros pasos para Brackets.">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>

        <h1>PRIMEROS PASOS CON BRACKETS</h1>
        <h2>¡Ésta es tu guía!</h2>
        
        <!--
            HECHO CON <3 Y JAVASCRIPT
        -->

        <p>
            Bienvenido a una versión preliminar de Brackets, un nuevo editor de código abierto para la nueva
            generación de Internet. Somos unos apasionados de los estándares y queremos construir mejores
            herramientas para JavaScript, HTML, CSS y el resto de tecnologías web. Éste es nuestro humilde
            comienzo.
        </p>

        <!--
            ¿QUÉ ES BRACKETS?
        -->
        <p>
            <em>Brackets es un editor diferente.</em>
            La gran diferencia es que está escrito en JavaScript, HTML y CSS. Esto significa que la mayoría de quienes
            usan Brackets tiene las habilidades necesarias para modificar y extender el editor. De hecho, nosotros
            lo usamos todos los días para desarrollar Brackets. También tiene algunas características únicas como
            Edición Rápida, Desarrollo en Vivo y más que no encontrarás en otros editores.
            Sigue leyendo para saber más sobre cómo sacar provecho de estas características
        </p>
        
        <h2>Estamos intentando algunas cosas nuevas</h2>
        
        <!--
            LA RELACIÓN ENTRE HTML, CSS Y JAVASCRIPT
        -->
        <h3>Edición rápida de CSS y JavaScript</h3>
        <p>
            Se acabó el estar saltando de documento en documento perdiendo de vista lo que estás haciendo. Mientras
            estás escribiendo HTML, usa el atajo de teclado <kbd>Cmd/Ctrl + E</kbd> para abrir un editor rápido en
            línea con todo el contenido CSS relacionado. Ajusta tu CSS y oprime <kbd>ESC</kbd> para volver a tu HTML, o simplemente
            mantén las reglas CSS abiertas para que pasen a formar parte de tu editor de HTML. Si pulsas <kbd>ESC</kbd>
            fuera de un editor rápido, todos se cerrarán a la vez.
        </p>

        <samp>
            ¿Quieres verlo funcionando? Coloca tu cursor sobe la etiqueta <!-- <samp> --> y oprime <kbd>Cmd/Ctrl + E</kbd>.
            Deberías ver aparecer un editor rápido de CSS más arriba, mostrando la regla CSS que le afecta. La edición rápida
            funciona también en atributos de de tipo clase e id.
            
            Puedes crear nuevas reglas de la misma manera. Haz click en una de las etiquetas <!-- <p> --> de más arriba y
            oprime <kbd>Cmd/Ctrl + E</kbd>. Todavía no hay reglas para ese elemento, pero puedes hacer click en el 
            botón Nueva Regla para añadir una nueva regla a las etiquetas <!-- <p> -->.
        </samp>
        
        <a href="screenshots/quick-edit.png">
            <img alt="Una captura de pantalla con un Editor Rápido de CSS" src="screenshots/quick-edit.png" />
        </a>
        
        <p>
            También puedes usar el mismo atajo para editar otras cosas--como funciones en JavaScript, colores y funciones de
            temporización de animaciones--y estamos añadiendo más y más continuamente. Por ahora, no se pueden anidar editores 
            en línea, por lo que sólo puedes usar la característica de Edición Rápida cuando el cursor está en un editor "completo".
        </p>

        <!--
            LIVE PREVIEW
        -->
        <h3>Visualiza cambios en archivos HTML y CSS en vivo en el navegador</h3>
        <p>
            ¿Conoces ese baile de "guardar/recargar" que llevamos años haciendo? ¿Ése en el que haces cambios en tu
            editor, oprimes guardar, cambias al navegador y recargas para por fin poder ver el  resultado? Con Brackets,
            ya no tienes que hacerlo.
        </p>
        <p>
            ¡Brackets abrirá una <em>conexión en vivo</em> con tu navegador local y le enviará los cambios en el
            archivo HTML y CSS conforme escribas! Puede que ya estés haciendo algo parecido con las herramientas de desarrollo
            del navegador, pero con Brackets ya no necesitas copiar y pegar el código final de vuelta a tu editor.
            ¡Tu código se ejecuta en el navegador, pero vive en tu editor!
        </p>
        
        <h3>Resaltado en vivo de elementos HTML y reglas CSS</h3>
        <p>
            Brackets te ayuda a ver cómo los cambios en HTML y CSS afectan a tu página. Cuando tu cursor se encuentre
            sobre una regla de CSS, Brackets resaltará todos los elementos afectados en el navegador. Del mismo modo,
            cuando estés editando un archivo HTML, Brackets también resaltará los elementos correspondientes en tu
            navegador.
        </p>

        <samp>
            Si tienes instalado Google Chrome, puedes probarlo tú mismo. Haz click sobre el icono del rayo de la
            esquina superior derecha o presiona <kbd>Cmd/Ctrl + Alt + P</kbd>. Cuando Desarrollo en Vivo está
            funcionando en un documento HTML, todos los documentos CSS relacionados se pueden editar en
            tiempo real. El icono pasará de gris a dorado cuando Brackets consiga establecer una conexión
            con tu navegador.
            
            Ahora, coloca el cursor sobre la etiqueta <!-- <img> --> que se encuentra un poco más arriba. Observa
            cómo aparece el resaltado azul alrededor de la imagen en Chrome. Luego, utiliza <kbd>Cmd/Ctrl + E</kbd>
            para abrir las reglas de CSS existentes. Intenta cambiar el tamaño del borde de 10 a 20 píxeles o el color
            del fondo de "transparent" a "hotpink". Si Brackets y tu navegador están funcionando en paralelo, verás los
            cambios reflejados de manera instantánea en tu navegador. Genial, ¿verdad?
        </samp>
        
        <p class="note">
            Actualmente, Brackets sólo soporta Desarrollo en Vivo para HTML y CSS. Aún así, en la versión actual, los cambios
            en ficheros JavaScript son detectados y recargados automáticamente en el navegador cuando guardas. En
            estos momentos estamos trabajando en añadir soporte para Desarrollo en Vivo para JavaScript. Además, las
            actualizaciones automáticas sólo son posibles en Google Chrome, pero esperamos poder trasladar próximamente
            esta funcionalidad a todos los grandes navegadores.
        </p>
        
        <h3>Vista Rápida</h3>
        <p>
            Para aquellos que todavía no han memorizado las equivalencias de color entre Hex y RGB, Brackets permite ver
            exactamente qué color se está utilizando rápida y fácilmente. Tanto en CSS como en HTML, simplemente mueve el
            cursor sobre cualquier valor de color o gradiente y Brackets mostrará una previsualización del mismo de manera
            automática. Lo mismo sirve para imágenes: simplemente pasa el cursor sobre la dirección de una imagen en Brackets,
            y éste mostrará una vista en miniatura de la misma.
        </p>
        
        <samp>
            Para probar la previsualización tú mismo, coloca el cursor en la etiqueta <!-- <body> --> al principio de este
            documento y oprime <kbd>Cmd/Ctrl + E</kbd> para abrir un editor CSS. Ahora, simplemente mueve el ratón sobre
            cualquiera de los colores dentro del CSS. También puedes verlo funcionando en gradientes abriendo un editor
            de CSS en la etiqueta <!-- <html> --> pasando el cursor por cualquiera de los valores para las imágenes de fondo.
            Para probar la vista previa de imágenes, coloca el cursor sobre la imagen con la captura de pantalla incluida
            antes en este documento.
        </samp>
        
        <h3>¿Necesitas algo más? ¡Prueba una extensión!</h3>
        <p>
            Además de todas las bondades naturales de Brackets, nuestra amplia y creciente comunidad de 
            desarrolladores de extensiones ha creado más de un centenar de extensiones que añaden útiles 
            funcionalidades. Si hay algo que necesitas que Brackets no soporte, es bastante probable que 
            alguien haya construido una extensión para ello. Para navegar o buscar en la lista de extensiones 
            disponibles, selecciona <strong>Archivo &gt; Gestionar extensiones...</strong> y haz click en la 
            pestaña "Disponibles". Cuando encuentres una que quieras, simplemente presiona el botón "Instalar"
            a su derecha.
        </p>

        <!--
            HAZNOS SABER LO QUE PIENSAS
        -->
        <h2>Involúcrate</h2>
        <p>
            Brackets es un proyecto de código abierto. Desarrolladores web de todo el mundo están contribuyendo
            a construir un mejor editor de código. Haznos saber lo que piensas, comparte tus ideas o contribuye
            directamente al proyecto.
        </p>
        <ul>
            <li><a href="http://brackets.io">Brackets.io</a></li>
            <li><a href="http://blog.brackets.io">Blog del equipo de Brackets</a></li>
            <li><a href="http://github.com/adobe/brackets">Brackets en GitHub</a></li>
            <li><a href="https://brackets-registry.aboutweb.com">Registro de Extensiones de Brackets</a></li>
            <li><a href="http://github.com/adobe/brackets/wiki">Wiki de Brackets</a></li>
            <li><a href="http://groups.google.com/group/brackets-dev">Lista de correo de los desarrolladores de Brackets</a></li>
            <li><a href="https://twitter.com/#!/brackets">@brackets en Twitter</a></li>
            <li>Habla con los desarrolladores de Brackets por IRC en #brackets en Freenode</li>
        </ul>

    </body>
</html>
<!--

    [[[[[[[[[[[[[[[     ]]]]]]]]]]]]]]]
    [::::::::::::::     ::::::::::::::]
    [::::::::::::::     ::::::::::::::]
    [::::::[[[[[[[:     :]]]]]]]::::::]
    [:::::[                     ]:::::]
    [:::::[                     ]:::::]
    [:::::[                     ]:::::]
    [:::::[                     ]:::::]
    [:::::[    CODE THE WEB     ]:::::]
    [:::::[  http://brackets.io ]:::::]
    [:::::[                     ]:::::]
    [:::::[                     ]:::::]
    [:::::[                     ]:::::]
    [:::::[                     ]:::::]
    [::::::[[[[[[[:     :]]]]]]]::::::]
    [::::::::::::::     ::::::::::::::]
    [::::::::::::::     ::::::::::::::]
    [[[[[[[[[[[[[[[     ]]]]]]]]]]]]]]]

-->
